<template>
  <!--  图书详情页弹窗-->
  <BookDetail @favoriteChanged="handleFavoriteChanged" :detailDialog="detailDialog" :bookId="bookId" @visible="getVisible"/>
  <!--  图书主体页面-->
  <main class="container mx-auto px-4 py-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-6">
      <div class="book-card" v-for="book in books" :key="book.id">
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
          <img @click="openDetail(book.id)" :src="$urlImage+book.imgSrc" alt="book cover" class="w-full h-40 object-cover">
          <div class="p-4">
            <h6 class="font-bold text-lg mb-2 line-clamp-1">{{ book.name }}</h6>
            <p class="text-gray-600 text-sm mb-1 line-clamp-1">作者: {{ book.author }}</p>
            <div class="flex justify-between items-center mt-3">
              <span class="text-orange-600 font-bold">¥{{ book.price }}</span>
              <span class="text-gray-500 text-sm">销量: {{ book.buyCount }}</span>
            </div>
            <div class="flex gap-1 mt-2">
              <button class="flex-1 bg-orange-100 hover:bg-orange-200 text-orange-700 py-1 px-2 rounded transition-colors duration-300">
                加入购物车
              </button>
              <button class="flex-1 bg-orange-500 hover:bg-orange-600 text-white py-1 px-2 rounded transition-colors duration-300">
                购买
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--    图书分页-->
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </main>
</template>

<script setup>
import {nextTick, onMounted, ref, watch} from 'vue';
import axios from "axios";
import BookDetail from "./BookDetail.vue";
import { userStore } from '@/store/index.js'
const userItemStore = userStore();

/*分页开始*/
const books = ref([]);
const pageNum= ref(1)
const pageSize = ref(10)
const total = ref(-1)
const background = ref(false)
const disabled = ref(false)


const initData =  async () =>{
  axios.post(`/bookCollection/selectCollectionStorageByUserId/${userItemStore.user.id}/${pageNum.value}/${pageSize.value}`).then(resp=>{

    books.value = resp.data.list;
    total.value = resp.data.total;

  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  initData()
}
const handleCurrentChange = (val) => {
  pageNum.value = val
  initData()
}
/*分页结束*/



//图书详情弹窗
const bookId=ref(-1);
const detailDialog=ref(false);
const openDetail=(id)=>{
  detailDialog.value=true;
  bookId.value=id;
}
const getVisible=(val)=>{
  detailDialog.value=val;
}
// 处理收藏状态变更
const handleFavoriteChanged = async (payload) => {
  console.log('收藏状态变更:', payload)
  await nextTick();
  // 重新加载数据
  await initData() // 刷新图书列表
}
// 监听userStore的favoriteMap变化，作为备用刷新机制
watch(
    () => userItemStore.favoriteMap,
    (newFavoriteMap) => {
      console.log('收藏地图变更，刷新数据');
      initData();
    },
    { deep: true }
);

onMounted(()=> {
  initData();
})

</script>

<style scoped>
.book-card {
  transition: all 0.3s ease;
}
.flex button {
  font-size: 10px;
}
</style>